<template>
  <div class="app-container">


    <el-form v-loading="listLoading" class="form_warp" ref="dataForm"  label-position="left" label-width="100px" style="width: 100%; margin-left:50px;">
      <el-row>
        <el-col :span="9">
          <el-form-item label="订单号">
            <span>  {{orderInfo.order_sn}} </span>
          </el-form-item>
        </el-col>

        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9">
          <el-form-item label="下单时间">
            <span>  {{orderInfo.create_time | formatDate }} </span>
          </el-form-item>
        </el-col>
      </el-row>











      <el-row>
        <el-col :span="9">
          <el-form-item label="订单总计">
            <span>  {{(orderInfo.express_fee-0) +( orderInfo.order_price-0)}} </span>
          </el-form-item>

        </el-col>
        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9">
          <el-form-item label="订单金额">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span>  {{orderInfo.order_price}} </span>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="订单数量">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span>  {{orderInfo.goods_num}} </span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9">
          <el-form-item label="订单备注">
            <span>  {{orderInfo.order_note||'-'}} </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="订单运费">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span>  {{orderInfo.express_fee}} </span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9">

        </el-col>
      </el-row>
      <h5 style="opacity:0;">1</h5>
      <template v-if="orderInfo.address">
        <el-row>

          <el-col :span="9">
            <el-form-item label="收件人">
              <span>  {{orderInfo.address.name||'-'}} </span>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <span style="opacity:0;">-</span>
          </el-col>
          <el-col :span="9">
            <el-form-item label="手机号">
              <!-- <el-input v-model="temp.beishu" /> -->
              <span>  {{orderInfo.address.mobile||'-'}} </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9">
            <el-form-item label="详细地址">
              <!-- <el-input v-model="temp.beishu" /> -->
              <span>  {{orderInfo.address.address||'-'}} </span>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <span style="opacity:0;">-</span>
          </el-col>
          <el-col :span="9">

          </el-col>
        </el-row>
      </template>

      <h5 style="opacity:0;">1</h5>

      <template v-if="orderInfo.goods">
      <el-row>
        <el-col :span="9">
          <el-form-item label="商品名称">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span>  {{orderInfo.goods.title}} </span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9">

          <el-form-item label="商品运费">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span> {{orderInfo.goods.express_fee||'-'}} </span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="9">
          <el-form-item label="商品售价">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span>  {{orderInfo.goods.real_price}} </span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9">

          <el-form-item label="商品Id">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span> {{orderInfo.goods_id}} </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="商品图片">
            <img v-for="el in orderInfo.goods._img_list" :src="el" alt="" style="width:50px;height:50px;margin-left:10px;" @click="showImg(el)">
            <!-- <el-input v-model="temp.beishu" /> -->
            <!-- <span>  {{orderInfo.goods.title}} </span> -->
            <img src="" alt="">
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9">

          <el-form-item label="商品积分">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span> {{orderInfo.goods.unit||'-'}} </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-for="el in orderInfo.goods._attribute">
        <el-col :span="9">
          <el-form-item label="自定义属性名">

            <span> {{el._key}} </span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9">
          <el-form-item label="自定义属性值">
            <span> {{el._value}} </span>
            <!-- <el-input readyOnly="readyOnly" disabled="disabled" v-model="el._value" /> -->
          </el-form-item>
        </el-col>
      </el-row>
      </template >
      <h5 style="opacity:0;">1</h5>
      <template >
        <el-row>
          <el-col :span="9">
            <el-form-item label="物流单号">
              <!-- <el-input v-model="temp.beishu" /> -->
              <span>  {{orderInfo.express_order||'-'}} </span>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <span style="opacity:0;">-</span>
          </el-col>
          <el-col :span="9">
            <el-form-item label="物流公司">
              <span>  {{orderInfo.express_name || '-'}} </span>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <h1></h1>
      <template v-if="orderInfo.userData">
      <el-row>
        <el-col :span="9">
          <el-form-item label="用户ID">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span>  {{orderInfo.user_id}} </span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9">

          <el-form-item label="用户昵称">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span> {{orderInfo.userData.nickname}} </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="用户手机号">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span>  {{orderInfo.userData.mobile}} </span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9">

        </el-col>
      </el-row>
    </template>

    <h5 style="opacity:0;">1</h5>
      <el-row>
        <el-col :span="9">
          <el-form-item label="更新时间">
            <!-- <el-input v-model="temp.beishu" /> -->
            <span>  {{orderInfo.update_time  | formatDate }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9" >
          <el-form-item label="订单状态">
            <span>  {{orderInfo.status|statusfn}} </span>
          </el-form-item>
          <!-- <span>  {{(wuliudata.register_time/1000)|formatDate}} </span> -->
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="自提预留电话">
            <span>  {{orderInfo.phone||'-'}} </span>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <span style="opacity:0;">-</span>
        </el-col>
        <el-col :span="9" >

          <!-- <span>  {{(wuliudata.register_time/1000)|formatDate}} </span> -->
        </el-col>
      </el-row>









    </el-form>

      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="orderInfo.order_status == 0" @click="paynext">
          手动付款
        </el-button>

        <el-button type="primary" v-if="orderInfo.order_status == 201" @click="wuliunext">
          发货填写
        </el-button>
      </div> -->

    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" /> -->
    <!-- <el-dialog title="发货物流信息" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">

        <el-form-item label="物流单号" prop="wuliusn">
          <el-input v-model="temp.wuliusn" />
        </el-form-item>
        <el-form-item label="物流公司"  prop="wuliugongsi">
          <el-input v-model="temp.wuliugongsi" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitwulu">
          提交
        </el-button>
      </div>
    </el-dialog> -->

    <el-dialog :visible.sync="showdialogImg">
      <img :src="urlimg" alt="" >

    </el-dialog>
  </div>


</template>

<script>
// export { parseTime, formatTime } from '@/utils'
import {  testpaynext, fetchwuliu } from '@/api/article'
import { oderinfo } from '@/api/order'
// import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
const __ = {
  formatDate: (date, fmt) => {
    const padLeftZero = (str) => {
      return ('00' + str).substr(str.length)
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    }
    for (const k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
        const str = o[k] + ''
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
      }
    }
    return fmt
  }
}
const statufmt = {
  1: '待付款',
  2: '待发货',
  3: '待收货',
  4: '已完成',
  5: '已取消',
  6: '退款'
}
export default {
  name: 'orderdetails',
  filters: {

    statusfn(str){
      return statufmt[str];
    },
    formatDate(time) {
      if(time<=0)return '-'
      return __.formatDate(new Date(time * 1000), 'yyyy-MM-dd hh:mm:ss')
    },
  },
  data() {
    return {
      wuliudata: {},
      temp: {
        wuliusn: '',
        wuliugongsi: ''
      },
      rules: {
        wuliusn: [{ required: true, message: '物流单号 is required', trigger: 'blur' }],
        wuliugongsi: [{ required: true, message: '物流公司 is required', trigger: 'blur' }]
      },
      baseimgurl: '',
      urlimg: '',
      showdialogImg: false,
      textMap:{
        'update': '更新',
        'create': '创建'
      },
      dialogFormVisible: false,
      listLoading: true,
      handleOption: {},
      list: [],
      orderInfo: {},

    }
  },
  watch: {
    // 'listQuery.status'(a,b){
    //   // console.log(a)
    //   this.getList()
    // }
  },
  created() {
    this.getdata();
    console.log(this.$route)
    // this.getList()
  },
  methods: {

    showImg(urlimg){
      this.urlimg = urlimg;
      this.showdialogImg = true;
    },
    submitwulu(){
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp);
          tempData['order_id'] = this.orderInfo.id;
          tempData['register_time'] = new Date().getTime();
          fetchwuliu(tempData).then(() => {
            // this.resetTemp()
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Created Successfully',
              type: 'success',
              duration: 2000
            })
            this.getdata()
          })
        }
      })
    },
    wuliunext(){
      console.log(9999)
      this.temp = {
        wuliusn: '',
        wuliugongsi: ''
      };
      this.dialogFormVisible = true;
    },
    getdata(){

      let id = this.$route.params.id;
      oderinfo({id: id}).then(response => {
       // this.list = response.orderGoods;
       this.orderInfo = response;
       // this.wuliudata = response.wuliudata;
         this.listLoading = false;
      })
    },
    paynext(){
      this.listLoading = true;
      testpaynext({id: this.orderInfo.id}).then(response => {
           this.getdata();
      })
    },
    list_pic_urlfn(str){
      return this.baseimgurl + str.split(',')[0];
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.form_warp span{
  display: block;
  padding-left: 10px;
  border-bottom: 1px solid #ccc;
}
</style>
